<template>
  <div class="container">
    <uv-navbar title="广场话题" :autoBack="true" bg-color="linear-gradient(to right, #FFF8EE, #E5FDFB)" placeholder></uv-navbar>

    <view class="title bold flex">
      <uv-image src="https://cos.qcshejiao.com/qc/xcxui/ig/66131.png" width="20px" height="20px"></uv-image>
      <text>热力话题</text>
    </view>

    <view class="box" v-for="(item,index) in topicList" :key="index" @click="proxy.$utils.toLink('/packagePages/topic/topicDetails?id='+item.id)">
      <view class="cellTitle flex alignCenter justifyBetween">
        <view class="flex alignCenter left bold">
          <uv-image src="https://cos.qcshejiao.com/qc/xcxui/ig/28499.png" width="15px" height="15px"></uv-image>
          <text>{{item.topicName}}</text>
          <uv-image v-if="item.isInvolved==1" src="https://cos.qcshejiao.com/qc/xcxui/ig/57966.png" width="22px" height="22px"></uv-image>
        </view>
        <view class="right fz12">{{item.dynamicNumber}}条动态</view>
      </view>
      <view class="cellContent flex">
        <uv-image :src="item.topicImage" width="85px" mode="widthFix" radius="5"></uv-image>
        <view class="data width100">
          <view class="fz12">{{item.topicMassage}}</view>
          <view class="flex justifyBetween alignCenter" style="margin-top: 10px">
            <view class="flex alignCenter fz12 shrink" v-if="item.topicPublic">
              <uv-avatar :src="item.topicPublic.logo" size="23" mode="aspectFill"></uv-avatar>
              <text style="margin-left: 5px">{{item.topicPublic.nickName}}</text>
            </view>
            <view class="flex alignCenter">
              <uv-image src="https://cos.qcshejiao.com/qc/xcxui/ig/62060.png" width="16px" height="16px"></uv-image>
              <view class="desc fz12">{{proxy.$utils.dateTimeFormateFn(item.createTime)}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <uv-load-more :status="status" />
    <uv-back-top :scroll-top="scrollTop"></uv-back-top>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();

let scrollTop = ref(0);
let tabs = ref([
  { name: "话题", type: 1 },
  { name: "关注", type: 2 },
]);
let topicList = ref([]);
let status = ref("loadmore");
let query = {
  page: 1,
  pageSize: 10,
  type: 1,
};
let totalPages = 0;
let tagItemStyle = computed(() => {
  return {
    color: "#999999",
    fontSize: "16px",
  };
});

let activeStyle = computed(() => {
  return {
    fontSize: "16px",
    color: "#B789FF",
    fontWeight: "bold",
  };
});

onLoad((e) => {
  getTopic();
});

onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

onShow(() => {
  uni.setNavigationBarColor({
    frontColor: "#000000", //文字颜色
    backgroundColor: "#ffffff", //底部背景色
  });
});

onReachBottom(() => {
  if (totalPages <= query.page) return;
  query.page++;
  getTopic();
});

//获取话题
async function getTopic() {
  try {
    status.value = "loading";
    let resp = await proxy.$apis.queryAllTopic(query);
    let arr = [...topicList.value];
    if (resp.records.length) {
      arr = proxy.$utils.filterArr(arr, resp.records, "id");
    }
    topicList.value = arr;
    totalPages = resp.totalPages;
    console.log("话题", resp);
  } catch (error) {
  } finally {
    status.value = "nomore";
  }
}

function tabClick(e) {
  query.type = e.type;
  query.page = 1;
  topicList.value = [];
  getTopic();
}
</script>



<style lang="scss" scoped>
.container {
  padding: 15px;
  min-height: 100vh;
  background: url("https://cos.qcshejiao.com/qc/xcxui/ig/80941.png");
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  //background-position: contain; /* 背景图片居中 */
  background-attachment: fixed;
  .title {
    text {
      margin-left: 5px;
    }
  }
  .box {
    margin-top: 15px;
    .cellTitle {
      .left {
        text {
          color: #85818a;
          margin: 0 5px;
        }
      }
      .right {
        color: #95908a;
      }
    }
    .cellContent {
      background-color: white;
      margin-top: 5px;
      padding: 10px;
      border-radius: 15px;
      .data {
        margin-left: 15px;
      }
    }
  }
}
</style>

